<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no,maximum-scale=1">
  <title>单词排列-八卦</title>
  <style>
    * {
      margin: 0;padding: 0;
    }
    .container {
      width: 99vw;
      height: 99vw;
      margin: 20px auto;
      position: relative;
      box-sizing: border-box;
      /*background-color: #f5f2f0;*/
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
    }

    .item {
      /*width: 200px;*/
      /*height: 200px;*/
      box-sizing: border-box;
      /*border-radius: 50%;*/
      transform-origin: 50% 50%;
      display: flex;
      align-items: center;
      flex-direction: column;
      overflow: hidden;
      /*border: 1px solid #b3d4fc;*/
    }

    .bottom {
      transform: rotate(180deg);
    }

    .item:nth-child(1), .item:nth-child(3), .item:nth-child(7), .item:nth-child(9), .item:nth-child(5) {
      justify-content: center;
    }

    .item:nth-child(1), .item:nth-child(3), .item:nth-child(7), .item:nth-child(9) {
      padding-top: 50px;
    }

    .item:nth-child(1) {
      transform: rotate(-45deg);
    }

    .item:nth-child(4) {
      transform: rotate(-90deg);
    }

    .item:nth-child(7) {
      transform: rotate(-135deg);
    }

    .item:nth-child(8) {
      transform: rotate(180deg);
    }

    .item:nth-child(9) {
      transform: rotate(135deg);
    }

    .item:nth-child(6) {
      transform: rotate(90deg);
    }

    .item:nth-child(3) {
      transform: rotate(45deg);
    }

    .arrow {
      /*width: 100px;*/
      /*height: 15px;*/
      position: relative;
      /*background-color: #795da3;*/
      background-image: url("../src/img/arrow.png");
      background-position: center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-bottom: 10px;
    }

    .arrow-reverse {
      transform-origin: 50% 50%;
      transform: rotate(180deg);
    }


    #words {
      width: 100%;
      height: 150px;
    }
    #form {
      width: 100%;
      margin-top: 20vw;
      display: flex;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
    }
    button {
      margin-top: 20px;
      width: 200px;
      height: 35px;
      font-size: 20px;
      background-color: #b3d4fc;
    }

  </style>
</head>
<body>
<div id="form">
  <textarea id="words" placeholder="单词逗号或 . 隔开" ></textarea>
  <button onclick="test()">提 交</button>
</div>
<div class="container" id="container">

</div>
<script>

  function createDoc(words) {
    let container = document.getElementById("container")
    // let wid
    let boxWidth = container.offsetWidth
    if (boxWidth > 600) {
      boxWidth = 600
    }
    container.style.width = boxWidth + "px"
    container.style.height = boxWidth + "px"
    let itemWidth = boxWidth / 3 - 1
    let arrowWidth = itemWidth / 2
    let arrowHeight = arrowWidth / 7
    console.log("boxWidth = ",boxWidth)
    console.log("itemWidth = ",itemWidth)
    let html = ''
    for (let i = 0; i < 9; i++) {
      let word1 = words[i * 2]
      let word2 = words[i * 2 + 1]
      html += `
    <div class="item" style="width: ${itemWidth}px;height: ${itemWidth}px">
        <div class="top">${word1}</div>
        <div class="arrow" style="width: ${arrowWidth}px;height: ${arrowHeight}px"></div>
        <div class="arrow arrow-reverse" style="width: ` + arrowWidth+`px;height: ` + arrowHeight + `px"></div>
        <div class="bottom">${word2}</div>
    </div>
`
    }

    container.innerHTML = html
  }

  // let words = [
  //     "apple",
  //     "banana",
  //     "cat",
  //     "dog",
  //     "elephant",
  //     "fish",
  //     "grape",
  //     "horse",
  //     "ice cream",
  //     "juice",
  //     "kiwi",
  //     "lemon",
  //     "mango",
  //     "orange",
  //     "pear",
  //     "queen",
  //     "rabbit",
  //     "strawberry"
  // ];

  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }

  function test() {
    let words = document.getElementById("words").value
    words = words.replace(/，/g,'.')
    words = words.replace(/,/g,'.')
    let word_arr = words.split('.')
    console.log("word_arr = ",word_arr)
    console.log("word_arr.length",word_arr.length)
    if (word_arr.length < 18) {
      let short_num = 18-word_arr.length
      for(let i=0; i< short_num; i++) {
        word_arr.push("")
      }
      // alert("不足18个单词")
      // return
    }
    word_arr = shuffleArray(word_arr)
    console.log("word_arr",word_arr)
    document.getElementById('container').style.display = "flex"
    document.getElementById('form').style.display = "none"
    createDoc(word_arr)
  }

  // test()
</script>
</body>
</html>